<template>
  <header>
    <div class="l-content">
      <el-button plain icon="el-icon-menu" size="mini" @click="handleMenu"></el-button>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{ item.label }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img class="user-img" :src="userImg">{{ user }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="handleLogout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "CommonHeader",
  data() {
    return {
      userImg: require('../assets/image/chicken.jpeg'),
    }
  },
  // computed用来监控自己定义的变量，该变量不在data里面声明
  computed: {
    // 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。
    // 为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
    ...mapState({
      // 把tabList的值赋给tags
      tags: state => state.tab.tabList,
      user: state => state.user.user
    }),
    currentMenu() {
      const currentMenu = this.$store.state.tab.currentMenu
      return currentMenu === null ? '首页' : currentMenu.label
    }
  },
  methods: {
    handleMenu() {
      this.$store.commit('collapseMenu')
    },
    handleLogout() {
      this.$confirm("是否退出当前账号？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$store.commit('clearToken')
        this.$store.commit('clearMenu')
        this.$router.push({ name: 'login'})
      })
    }
  }
}
</script>

<style lang="less" scoped>
  header {
    display: flex;
    height: 100%;
    /* 左右贴边 */
    justify-content: space-between;
    /* 上下居中 */
    align-items: center;
    .l-content {
      display: flex;
      align-items: center;
      .el-button {
        margin-right: 20px;
      }
      .el-breadcrumb /deep/ .el-breadcrumb__inner
      {
        color: #9f9f9f;				// 你想要设置的字体颜色
      }
      .el-breadcrumb__item:last-child /deep/ .el-breadcrumb__inner {
        color: #fff;
      }
    }

    .r-content {
      display: flex;
      align-items: center;
      span {
        display: flex;
        align-items: center;
        .user-img {
          width: 30px;
          height: 30px;
          // 把图片设置为圆形
          border-radius: 50%;
          margin-right: 10px;;
        }
      }
    }
  }



</style>